<template>
  <div class="container">
    <!-- <div class="p30 bill-step">
      <img src="../../assets/icons/bill/step1.png" alt="" class="step1-img">
    </div> -->

    <!-- <div class="hr10gray"></div> -->
    <div class="p30 bill-items border-b">
      <div class="bill-item" v-if="info.billDetail.status==0 || info.billDetail.status==-1||info.billDetail.status==8">
        订单状态：{{info.billDetail.status|billDetailStatus}}
      </div>
      <template v-if="info.billDetail.status>0">
        <div class="bill-item">
          收货人：{{info.billDetail.receiver||'--'}}
        </div>
        <div class="bill-item">
          手机号码：{{info.billDetail.telephone||'--'}}
        </div>
        <div class="bill-item">
          收货地址：{{info.billDetail.address||'--'}}
        </div>
        <div class="bill-item">
          配送方式：{{info.expressName||'普通快递'}}
        </div>
      </template>
    </div>
    <div class="p30 title-p border-b" v-if="info.billDetail.words">
      买家留言：
      <span class="words">{{info.billDetail.words|emptyText}}</span>
    </div>
    <div class="title-div fz28 txt222">
      <div class="flex">
        <div class="blue-line"></div>
        <div class="flex-con">
          商品信息
        </div>
      </div>
    </div>
    <router-link v-for="(good,goodIndex) in info.goods" :key="goodIndex" class="goods-item flex flex-stretch" tag="div" :to="'goodsdetail?id='+good.goodsId">
      <xd-img :src="good.goodsCover|absUrl" alt="" class="goods-img" />
      <div class="goods-desc flex-con">
        <div class="goods-title lht1">
          {{good.goodsTitle}}
        </div>
        <div class="flex">
          <div class="goods-num flex-con">
            × {{good.goodsNum}}
          </div>
          <div class="goods-points">
            <span class="points" v-if="good.goodsPoints>0">{{good.goodsPoints}}积分</span>
            <span v-if="good.goodsPoints>0 && good.goodsPrice>0">+</span>{{good.goodsPrice}}元
          </div>
        </div>
        <div class="btn-area text-right" v-if="good.goodsStatus>=1">
          <!-- <div class="apply-btn" @click.stop="applyForAfterService(good.itemId)" v-if="good.goodsStatus<8">
            申请售后
          </div> -->
          <div class="apply-btn" @click.stop="gotoflow(good.itemId)" v-if="good.goodsStatus>=2">
            查看物流
          </div>
        </div>
      </div>
    </router-link>


    <div class="hr10gray"></div>
    <div class="p30 border-b">
      <div class="flex">
        <div class="flex-con fz28 txt222">
          发票信息
        </div>
        <div class="fz26 txt999">
          不开发票
        </div>
      </div>
    </div>
    <div class="title-div fz28 txt222">
      <div class="flex title-inner">
        <div class="blue-line"></div>
        <div class="flex-con">
          支付信息
        </div>
      </div>
      <div class="bill-info">
        <div class="flex">
          <div class="flex-con">
            支付方式：
          </div>
          <div>
            {{info.billDetail.paymentType|paymentTypeName}}
          </div>
        </div>
        <div class="flex">
          <div class="flex-con">
            订单总额：
          </div>
          <div>
            ￥{{info.billDetail.amount|moneyFormat}}
          </div>
        </div>
        <div class="flex">
          <div class="flex-con">
            运费：
          </div>
          <div>
            ￥{{info.billDetail.expressFee | moneyFormat}}
          </div>
        </div>
        <div class="flex">
          <div class="flex-con">
            实付金额：
          </div>
          <div>
            ￥{{(info.billDetail.amount+info.billDetail.expressFee)|moneyFormat}}
          </div>
        </div>

      </div>
      <div class="bill-info">
        <div>
          订单编号：{{info.billDetail.orderNo|emptyText}}
        </div>
        <div>
          下单时间：{{info.billDetail.createTime|parseTime}}
        </div>
        <div v-if="info.billDetail.payTime">
          付款时间：{{info.billDetail.payTime|parseTime}}
        </div>
        <div v-if="info.billDetail.sendTime">
          发货时间：{{info.billDetail.sendTime|parseTime}}
        </div>
      </div>
    </div>
    <template v-if="info.billDetail.status==0">
      <div class="footer-nav-before"></div>
      <div class="footer-nav flex">
        <button class="btn cancel-btn" @click="cancelBill" v-if="info.billDetail.status==0">取消订单</button>
        <button class="btn ok-btn" @click="payNow" v-if="info.billDetail.status==0">立即支付</button>
      </div>
    </template>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: {
          billDetail: {}
        }
      };
    },
    filters: {
      billDetailStatus(status) {
        if (status == -1) {
          return "已取消";
        }
        if (status == 8) {
          return "交易完成";
        }
        if (status == 0) {
          return "待支付";
        }
      }
    },
    methods: {
      gotoflow(item_id) {
        this.$router.push("/flow?item_id=" + item_id);
      },
      applyForAfterService(id) {
        // 申请售后
        this.$router.push("/reback?id=" + id);
      },
      cancelBill() {
        this.$confirm("确认取消订单吗?").then(action => {
          if (action) {
            this.showLoading();
            this.$post("/api/bill/cancelBill", {
                id: this.$route.query.id
              })
              .then(res => {
                this.hideLoading();
                this.$router.push("/bill");
              })
              .catch(() => {
                this.hideLoading();
              });
          }
        });
      },
      payNow() {
        //立即支付
      }
    },
    created() {
      this.showLoading();
      this.$get("/api/bill/getBillDetail", {
          id: this.$route.query.id
        })
        .then(info => {
          this.info = info;
          this.hideLoading();
        })
        .catch(() => {
          this.hideLoading();
        });
    }
  };

</script>

<style lang="scss" scoped>
  .words {
    font-size: 0.3467rem;
    color: #999999;
  }

  .bill-items {
    line-height: 0.56rem;
    font-size: 0.32rem;
    color: #999;
  }

  .bill-step {
    text-align: center;
    box-shadow: 0px -3px 20px 0px rgba(0, 0, 0, 0.26);
  }

  .step1-img {
    width: 7.8133rem;
  }

  .title-p {
    font-size: 0.3733rem;
    color: #222;
  }

  .blue-line {
    width: 0.08rem;
    height: 0.6133rem;
    background-color: #28b46b;
    margin-right: 0.2667rem;
  }

  .title-div {
    padding: 0.2267rem 0.4rem;
  }

  .goods-title {
    padding-bottom: 0.34rem;
  }

  .goods-img {
    width: 2.64rem;
    height: 1.6933rem;
  }

  .goods-item {
    background-color: #f3f3f3;
    padding: 0.4rem 0.4rem 0 0.4rem;
    font-size: 0.3733rem;
  }

  .goods-desc {
    padding-left: 0.3333rem;
  }

  .goods-points {
    font-size: 0.32rem;
    color: #17402a;

    .points {
      color: #ff2a2a;
    }
  }

  .btn-area {
    padding: 0.4rem 0 0.2533rem 0;
    overflow: hidden;
  }

  .apply-btn {
    font-size: 0.32rem;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1467rem;
    border: solid 0.0267rem rgba(255, 115, 22, 0.96);
    color: #ff781f;
    display: block;
    float: right;
    margin-left: 0.2333rem;
    text-align: center;
  }

  .bill-info {
    margin-bottom: 0.8133rem;
    color: #999999;
    line-height: 0.56rem;
  }

  .title-inner {
    margin-bottom: 0.32rem;
  }

  .footer-nav-before {
    height: 1.3867rem;
  }

  .footer-nav {
    height: 1.3867rem;
    background-color: #ffffff;
    box-shadow: 0rem -0.04rem 0.16rem 0rem rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    right: 0;
    justify-content: flex-end;
    bottom: 0;
    padding-right: 0.4267rem;
  }

  .btn {
    // width: 2.2rem;
    height: 0.8133rem;
    background-color: transparent;
    border-radius: 0.1467rem;
    border: solid 0.0267rem #71b986;
    font-size: 0.3733rem;
  }

  .cancel-btn {
    color: #34a359;
  }

  .ok-btn {
    color: #ff2a2a;
    border-color: #ff2a2a;
    margin-left: 0.4rem;
  }

</style>
